<template>
	<div>
		<div class="list-content" v-for="item of list" :key="item.id">
			<div class="left-list"><span class="iconfont">&#xe6b7;</span><span class="list-word">{{item.content}}</span></div>
			<div class="right-list">0/{{item.num}}</div>
		</div>
	</div>
</template>

<style lang="stylus" scoped>
.list-content
	height:1rem
	line-height: 1rem
	overflow: hidden;
	.left-list
		padding-left: 10px;
		color:#b0b2bf
		font-size: 12px;
		float: left
		.list-word
			font-size:15px
			color:#000
			letter-spacing: 1px;
			margin-left: 1px;
	.right-list
		float:right
		font-size: 12px;
		color: #ccc;
		padding-right: 15px;
</style>

<script type="text/javascript">
	export default {
		data () {
			return {
		list: [
			{id:'001',
			content:'初中同学',
			num:'1'
		},
		{	id:'002',
			content:'高中同学',
			num:'10'
		},
		{	id:'003',
			content:'亲人一族0.0',
			num:'20'
		}]
			}

		}
	}
</script>